function ajax(options) {
    let xhr = new XMLHttpRequest()

    // 设置默认值
    options.type = options.type || 'get'
    options.async = options.async || true
    options.header = options.header || {
        'Content-Type': 'application/x-www-form-urlencoded'
    }

    // console.log(options.type)
    let arr = []

    for (let attr in options.data) {
        arr.push(attr + '=' + options.data[attr])
    }

    // console.log(arr)
    let str = arr.join('&')
    // console.log(str)

    // 判断是post还是get
    if (options.type === 'get') {
        xhr.open('get', options.url + '?' + str, options.async)
        xhr.send()
    } else {
        xhr.open('post', options.url, options.async)
        // 设置请求头
        for (let attr in options.header) {
            xhr.setRequestHeader(attr, options.header[attr])
        }
        // xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.send(str)
    }


    xhr.onload = function () {
        // 后台来的所有数据都是字符串
        // console.log(xhr.responseText)
        // let obj = JSON.parse(xhr.responseText)
        // console.log(obj)

        // 把拿到的数据返回给 调用函数的人
        // 回调函数
        if (options.success) {
            options.success(xhr.responseText)
        }
    }
}

{var nav=document.querySelector('nav')
var guanBi=document.querySelector('.guanBi')
var nav_li =document.querySelectorAll('.nav_box li')
var zhineng_erji=document.querySelector('.zhineng_erji')
var zhineng_erji_All=document.querySelectorAll('.zhineng_erji div')
var nav_li_a =document.querySelectorAll('.nav_box li a')
var header_mengceng=document.querySelector('.header_mengceng')
var erjiZuoBian=document.querySelectorAll('.erjiZuoBian li')
var erjiYouBian=document.querySelectorAll('.erjiYouBian ul')
var erji_1tu=document.querySelector('.erji_1tu')
var gouzi=document.querySelector('.gouzi')
var mao=document.querySelector('.mao')
var mao1=document.querySelector('.mao1')
var mao2=document.querySelector('.mao2')
var jiantou=document.querySelectorAll('.erjiZuoBian li b')
var ha=document.querySelector('.fuzhu')}
//注册事件，当鼠标点击 nav_li 二级显示
//——————————————————————————————控制二级————————————————————————————
nav_li.forEach(function(a,b){
    //这里把斜杠删除
a.onmouseover=function(){
    for(var i=0;i<zhineng_erji_All.length;i++){
        zhineng_erji_All[i].className='off'
    }
    zhineng_erji.style.height='660px'
    this.style.backgroundColor='black'
    nav_li_a[b].style.color='white'
    header_mengceng.style.backgroundColor='rgba(0, 0, 0, .5)'
    zhineng_erji_All[b].className='' 
}
a.onmouseout=function(){
    //zhineng_erji.style.height='0px'
    this.style.backgroundColor=''
    nav_li_a[b].style.color='black'
  
}

// ——————————————————————————控制二级的开关————————————————————————————————
guanBi.onclick=function(){
for(var i=0;i<zhineng_erji_All.length;i++){
        zhineng_erji_All[i].className='off'
    }
zhineng_erji.style.height='0px'
header_mengceng.style.backgroundColor=''
}
})
// ——————————————————————————控制三级——————————————————————————————————————
erjiZuoBian.forEach(function(a,b){
   a.onmouseover=function(){
     
       for(i=0;i<erjiZuoBian.length;i++){
        erjiYouBian[i].className='off'
        //jiantou[i].style.display='none'
       }
       erjiZuoBian[b].style.fontWeight='bold'
       erjiYouBian[b].className=''
       jiantou[b].style.display='flex'
   }
   a.onmouseout=function(){
    erjiZuoBian[b].style.fontWeight=''
    //jiantou[b].className=''
    jiantou[b].style.display='none'
   }
})
erji_1tu.onmouseover=function(){
   erji_1tu.style.width='370px'
}
erji_1tu.onmouseout=function(){
   erji_1tu.style.width='350px'
}
var fun=function(a){
a.onmouseover=function(){
   this.style.width='370px'
}
a.onmouseout=function(){
   this.style.width='350px'
}
}
fun(gouzi);fun(mao);fun(mao1);fun(mao2);
/**------------------小轮播区域---------------------- */

function xuanran(shopArr,arr,name1,class1,a,b,c,d,e,f,name2,class2,chanpinname,dazhejiage,yiqianjiage,nb,color1,color2,color3){
    //大一统函数每次执行的时候就会将本次渲染的数据存储到本地缓存之中
    //获取名字 价格 过去价格
   let text=document.querySelectorAll(`${nb}`)
   text[0].innerHTML=`${chanpinname}`
   text[1].innerHTML=`￥ ${dazhejiage}`
   text[2].innerHTML=`<strike>￥ ${yiqianjiage}</strike>`
    name1=document.querySelectorAll(`.${class1}`)
   var one=arr.slice(a,b)
   var two=arr.slice(c,d)
   var three=arr.slice(e,f)
  /*  console.log(one);
   console.log(two);
   console.log(three); */
    name1.forEach((ele,index)=>{
        if(index<=one.length){
        ele.innerHTML=`<img src="${one[index]}" alt="">`
        }else{
            return
        }
    })
    name1=document.querySelectorAll(`.${class1}`)
    var name2=document.querySelectorAll(`.${class2}`)
    name2[0].style.backgroundColor=color1
    name2[1].style.backgroundColor=color2
    name2[2].style.backgroundColor=color3
    name2.forEach((ele,index)=>{
        ele.onclick=function(){
            if(index===0){
                //先去清空所有的图床图片
                name1.forEach((ele,index)=>{
                    ele.innerHTML=''
                    if(index>=one.length){
                        console.log('第'+index+'张'+'图片大于于容器数量，已停止写入');
                        return
                        }else{
                            ele.innerHTML=`<img src="${one[index]}" alt="">`
                        }
                })
                //然后继续写入对应的图片
            }if(index===1){
                //先去清空所有的图床图片
                name1.forEach((ele,index)=>{
                    ele.innerHTML=''
                    if(index>=two.length){
                        console.log('第'+index+'张'+'图片大于于容器数量，已停止写入');
                        return
                        }else{
                            ele.innerHTML=`<img src="${two[index]}" alt="">`
                            
                        }
                })
            } if(index===2){
                
                name1.forEach((ele,index)=>{
                    ele.innerHTML=''
                    if(index>=three.length){
                        console.log('第'+index+'张'+'图片大于于容器数量，已停止写入');
                        return
                        }else{
                            ele.innerHTML=`<img src="${three[index]}" alt="">`
                        }
                })
                
            }
        }
    })
}
let oFirstButton=document.querySelector('.firstButton')
//2
let oSecondButton=document.querySelector('.secondButton')
let oSahng_pin_zhan_shi_main=document.querySelector('.sahng_pin_zhan_shi_main')
//这个函数负责治愈伤口。。。。
function cure(){
    let allSection=document.querySelectorAll('.sahng_pin_zhan_shi_main .section')
    allSection.forEach((ele)=>{
        ele.style.display='block'
    })
}
//这个函数负责第一页的渲染
function diyiye(){
    cure()
    
    {
        //每发送一次ajax请求，就运行一遍上面的函数，执行渲染
        ajax({
            url: '../php/liebiao.php',
            
            data:{
                num: 1,
                limit: 1
            },
            success(res) { 
                //执行完成ajax请求的时候，将本次请求的数据存入页面缓存当中

                var obj=JSON.parse(res)
                //
                let shopArr=obj.data[0]
                //将取到的本次数据对象以字符串的形式存入浏览器的本地存储之中
                //localStorage.setItem("firstData",JSON.stringify(shopArr))
                var chanpinname=(obj.data[0].name)
                var dazhejiage=(obj.data[0].price)
                var yiqianjiage=(obj.data[0].price2)
                //在这里就已经获取到了所有的图片地址数组
               var imgarr=(obj.data[0].imgurl).split("*")
                //将参数传入
                xuanran(shopArr,imgarr,'gouzi','swiper-slide',1,9,9,13,13,16,'mao','xiaodian section',chanpinname,dazhejiage,yiqianjiage,'.shangPinName,.shangPinPriceNow,.shangPinPricePass','green','purple','red')
                }
            })
          
        ajax({
            url: '../php/liebiao.php',
            data:{
                num: 2,
                limit: 1
            },
            success(res) { 
                var obj=JSON.parse(res)
                let shopArr=obj.data[0]
                var obj=JSON.parse(res)
                var chanpinname=(obj.data[0].name)
                var dazhejiage=(obj.data[0].price)
                var yiqianjiage=(obj.data[0].price2)
                //在这里就已经获取到了所有的图片地址数组
               var imgarr=(obj.data[0].imgurl).split("*")
                //将参数传入
                xuanran(shopArr,imgarr,'gouzi2','tuchuang2',1,9,9,18,18,27,'mao','xiaodian2 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1,.wenziqu2,.wenziqu3','pink','green','yellow','black')
                }
            })
            ajax({
                url: '../php/liebiao.php',
                data:{
                    num: 3,
                    limit: 1
                },
                success(res) { 
                    var obj=JSON.parse(res)
                    let shopArr=obj.data[0]
                    var obj=JSON.parse(res)
                    var chanpinname=(obj.data[0].name)
                    var dazhejiage=(obj.data[0].price)
                    var yiqianjiage=(obj.data[0].price2)
                    //在这里就已经获取到了所有的图片地址数组
                   var imgarr=(obj.data[0].imgurl).split("*")
                    //将参数传入
                    xuanran(shopArr,imgarr,'gouzi2','tuchuang3',1,5,6,11,18,27,'mao','xiaodian3 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_1,.wenziqu2_1,.wenziqu3_1','pink','green',)
                    }
                })
                ajax({
                    url: '../php/liebiao.php',
                    data:{
                        num: 4,
                        limit: 1
                    },
                    success(res) { 
                        var obj=JSON.parse(res)
                        let shopArr=obj.data[0]
                        var obj=JSON.parse(res)
                        var chanpinname=(obj.data[0].name)
                        var dazhejiage=(obj.data[0].price)
                        var yiqianjiage=(obj.data[0].price2)
                        //在这里就已经获取到了所有的图片地址数组
                       var imgarr=(obj.data[0].imgurl).split("*")
                        //将参数传入
                        xuanran(shopArr,imgarr,'gouzi2','tuchuang4',1,10,10,19,19,27,'mao','xiaodian4 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_2,.wenziqu2_2,.wenziqu3_2','pink','green','grey')
                        }
                    })
                    ajax({
                        url: '../php/liebiao.php',
                        data:{
                            num: 5,
                            limit: 1
                        },
                        success(res) { 
                            var obj=JSON.parse(res)
                            let shopArr=obj.data[0]
                            var obj=JSON.parse(res)
                            var chanpinname=(obj.data[0].name)
                            var dazhejiage=(obj.data[0].price)
                            var yiqianjiage=(obj.data[0].price2)
                            //在这里就已经获取到了所有的图片地址数组
                           var imgarr=(obj.data[0].imgurl).split("*")
                            //将参数传入
                            xuanran(shopArr,imgarr,'gouzi2','tuchuang5',0,6,6,12,12,19,'mao','xiaodian5 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_3,.wenziqu2_3,.wenziqu3_3','pink','green','grey')
                            }
                        })
                        ajax({
                            url: '../php/liebiao.php',
                            data:{
                                num: 6,
                                limit: 1
                            },
                            success(res) { 
                                var obj=JSON.parse(res)
                                let shopArr=obj.data[0]
                                var obj=JSON.parse(res)
                                var chanpinname=(obj.data[0].name)
                                var dazhejiage=(obj.data[0].price)
                                var yiqianjiage=(obj.data[0].price2)
                                //在这里就已经获取到了所有的图片地址数组
                               var imgarr=(obj.data[0].imgurl).split("*")
                                //将参数传入
                                xuanran(shopArr,imgarr,'gouzi2','tuchuang6',0,6,6,12,12,19,'mao','xiaodian6 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_4,.wenziqu2_4,.wenziqu3_4','pink','green','grey')
                                }
                            })
                            ajax({
                                url: '../php/liebiao.php',
                                data:{
                                    num: 7,
                                    limit: 1
                                },
                                success(res) { 
                                    var obj=JSON.parse(res)
                                    let shopArr=obj.data[0]
                                    var obj=JSON.parse(res)
                                    var chanpinname=(obj.data[0].name)
                                    var dazhejiage=(obj.data[0].price)
                                    var yiqianjiage=(obj.data[0].price2)
                                    //在这里就已经获取到了所有的图片地址数组
                                   var imgarr=(obj.data[0].imgurl).split("*")
                                    //将参数传入
                                    xuanran(shopArr,imgarr,'gouzi2','tuchuang7',0,6,6,12,12,19,'mao','xiaodian7 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_5,.wenziqu2_5,.wenziqu3_5','pink','green',)
                                    }
                                })
                                ajax({
                                    url: '../php/liebiao.php',
                                    data:{
                                        num: 8,
                                        limit: 1
                                    },
                                    success(res) { 
                                        var obj=JSON.parse(res)
                                        let shopArr=obj.data[0]
                                        var obj=JSON.parse(res)
                                        var chanpinname=(obj.data[0].name)
                                        var dazhejiage=(obj.data[0].price)
                                        var yiqianjiage=(obj.data[0].price2)
                                        //在这里就已经获取到了所有的图片地址数组
                                       var imgarr=(obj.data[0].imgurl).split("*")
                                        //将参数传入
                                        xuanran(shopArr,imgarr,'gouzi2','tuchuang8',0,6,6,12,12,19,'mao','xiaodian8 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_6,.wenziqu2_6,.wenziqu3_6','pink','green',)
                                        }
                                    })
        
                                }
}
//这个函数负责第二页的渲染
function page2(){
    cure()
    {
        //每发送一次ajax请求，就运行一遍上面的函数，执行渲染
        ajax({
            url: '../php/liebiao.php',
            
            data:{
                num: 9,
                limit: 1
            },
            success(res) { 
                var obj=JSON.parse(res)
                let shopArr=obj.data[0]
                var obj=JSON.parse(res)
                var chanpinname=(obj.data[0].name)
                var dazhejiage=(obj.data[0].price)
                var yiqianjiage=(obj.data[0].price2)
                //在这里就已经获取到了所有的图片地址数组
               var imgarr=(obj.data[0].imgurl).split("*")
                //将参数传入
                xuanran(shopArr,imgarr,'gouzi','swiper-slide',1,9,9,13,13,16,'mao','xiaodian section',chanpinname,dazhejiage,yiqianjiage,'.shangPinName,.shangPinPriceNow,.shangPinPricePass','blue','black','red')
                }
            })
          
        ajax({
            url: '../php/liebiao.php',
            data:{
                num: 10,
                limit: 1
            },
            success(res) { 
                var obj=JSON.parse(res)
                let shopArr=obj.data[0]
                var obj=JSON.parse(res)
                var chanpinname=(obj.data[0].name)
                var dazhejiage=(obj.data[0].price)
                var yiqianjiage=(obj.data[0].price2)
                //在这里就已经获取到了所有的图片地址数组
               var imgarr=(obj.data[0].imgurl).split("*")
                //将参数传入
                xuanran(shopArr,imgarr,'gouzi2','tuchuang2',1,9,9,18,18,27,'mao','xiaodian2 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1,.wenziqu2,.wenziqu3','pink','green','yellow')
                }
            })
            ajax({
                url: '../php/liebiao.php',
                data:{
                    num: 11,
                    limit: 1
                },
                success(res) { 
                    var obj=JSON.parse(res)
                    let shopArr=obj.data[0]
                    var obj=JSON.parse(res)
                    var chanpinname=(obj.data[0].name)
                    var dazhejiage=(obj.data[0].price)
                    var yiqianjiage=(obj.data[0].price2)
                    //在这里就已经获取到了所有的图片地址数组
                   var imgarr=(obj.data[0].imgurl).split("*")
                    //将参数传入
                    xuanran(shopArr,imgarr,'gouzi2','tuchuang3',1,5,6,11,18,27,'mao','xiaodian3 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_1,.wenziqu2_1,.wenziqu3_1','pink','green','black')
                    }
                })
                ajax({
                    url: '../php/liebiao.php',
                    data:{
                        num: 12,
                        limit: 1
                    },
                    success(res) { 
                        var obj=JSON.parse(res)
                        let shopArr=obj.data[0]
                        var obj=JSON.parse(res)
                        var chanpinname=(obj.data[0].name)
                        var dazhejiage=(obj.data[0].price)
                        var yiqianjiage=(obj.data[0].price2)
                        //在这里就已经获取到了所有的图片地址数组
                       var imgarr=(obj.data[0].imgurl).split("*")
                        //将参数传入
                        xuanran(shopArr,imgarr,'gouzi2','tuchuang4',1,10,10,19,19,27,'mao','xiaodian4 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_2,.wenziqu2_2,.wenziqu3_2','pink','green','grey')
                        }
                    })
                    ajax({
                        url: '../php/liebiao.php',
                        data:{
                            num: 13,
                            limit: 1
                        },
                        success(res) { 
                            var obj=JSON.parse(res)
                            let shopArr=obj.data[0]
                            var obj=JSON.parse(res)
                            var chanpinname=(obj.data[0].name)
                            var dazhejiage=(obj.data[0].price)
                            var yiqianjiage=(obj.data[0].price2)
                            //在这里就已经获取到了所有的图片地址数组
                           var imgarr=(obj.data[0].imgurl).split("*")
                            //将参数传入
                            xuanran(shopArr,imgarr,'gouzi2','tuchuang5',0,6,6,12,12,19,'mao','xiaodian5 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_3,.wenziqu2_3,.wenziqu3_3','pink','green','grey')
                            }
                        })
                       
        
                                }
    //这个时候获取页面里面最后三个section元素 删除
    var delete_last=document.querySelectorAll('.last1, .last2 , .last3')
    shanchu()
    function shanchu(){
    delete_last.forEach((ele)=>{
        ele.style.display='none'
    })  
}              
}
//页面加载的时候如果是true就进行第一页的渲染
if(sessionStorage.getItem('on_off')-0===0){
    console.log("将要渲染第一页");
   diyiye()
}else{
    console.log(' 将要渲染第二页');
    page2()
}
var on_of=0
oSecondButton.onclick=function(){
    on_of=1
    console.log(on_of)
    sessionStorage.setItem('on_off',on_of)
    page2()
    //点击第二页的时候on_off变成false
   
}
oFirstButton.onclick=function(){
    on_of=0
    console.log(on_of)
    sessionStorage.setItem('on_off',on_of)
    var delete_last=document.querySelectorAll('.last1, .last2 , .last3')
    //这个函数负责渲染第一页的数据
    diyiye()
    console.log('准备执行');
    delete_last.forEach((ele)=>{
        ele.style.display='block'
    })  
    console.log('执行完毕');
    //重复进行第一步的预渲染操作
  
}
//模糊搜索并且渲染
let oSearch=document.querySelector('.search')
function mohu(data){
    let allSection=document.querySelectorAll('.sahng_pin_zhan_shi_main .section')
    //这里的data是一个数组，里面包着五个对象
    //这里应该进行一个判断，根据取得的数组长度来决定渲染的数量
    console.log(data.length)
    let p=data.length
    console.log(data);
    let q=0
    if(q<p){
        //这里判断成功，进行数组中第q组数据的获取
        var chanpinname=(data[q].name)
        var dazhejiage=(data[q].price)
        var yiqianjiage=(data[q].price2)
        var imgarr=(data[q].imgurl).split("*")
        //这时候开始调用大一统函数,将获取的数值赋给大一统函数
        xuanran(imgarr,'gouzi','swiper-slide',1,9,9,13,13,16,'mao','xiaodian section',chanpinname,dazhejiage,yiqianjiage,'.shangPinName,.shangPinPriceNow,.shangPinPricePass','green','purple','red')
        
    }else{allSection[q].style.display='none'}
    q++
    if(q<p){
        //这里判断成功，进行数组中第q组数据的获取
        var chanpinname=(data[q].name)
        var dazhejiage=(data[q].price)
        var yiqianjiage=(data[q].price2)
        var imgarr=(data[q].imgurl).split("*")
        //这时候开始调用大一统函数,将获取的数值赋给大一统函数
        xuanran(imgarr,'gouzi2','tuchuang2',1,9,9,18,18,27,'mao','xiaodian2 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1,.wenziqu2,.wenziqu3','pink','green','yellow','black')
        
    }else{allSection[q].style.display='none'}
    q++
    if(q<p){
        //这里判断成功，进行数组中第q组数据的获取
        var chanpinname=(data[q].name)
        var dazhejiage=(data[q].price)
        var yiqianjiage=(data[q].price2)
        var imgarr=(data[q].imgurl).split("*")
        //这时候开始调用大一统函数,将获取的数值赋给大一统函数
        xuanran(imgarr,'gouzi2','tuchuang3',1,5,6,11,18,27,'mao','xiaodian3 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_1,.wenziqu2_1,.wenziqu3_1','pink','green',)
        
    }else{allSection[q].style.display='none'}
    q++
    if(q<p){
        //这里判断成功，进行数组中第q组数据的获取
        var chanpinname=(data[q].name)
        var dazhejiage=(data[q].price)
        var yiqianjiage=(data[q].price2)
        var imgarr=(data[q].imgurl).split("*")
        //这时候开始调用大一统函数,将获取的数值赋给大一统函数
        xuanran(imgarr,'gouzi2','tuchuang4',1,10,10,19,19,27,'mao','xiaodian4 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_2,.wenziqu2_2,.wenziqu3_2','pink','green','grey')
        
    }else{allSection[q].style.display='none'}
    q++
    if(q<p){
        //这里判断成功，进行数组中第q组数据的获取
        var chanpinname=(data[q].name)
        var dazhejiage=(data[q].price)
        var yiqianjiage=(data[q].price2)
        var imgarr=(data[q].imgurl).split("*")
        //这时候开始调用大一统函数,将获取的数值赋给大一统函数
        xuanran(imgarr,'gouzi2','tuchuang5',0,6,6,12,12,19,'mao','xiaodian5 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_3,.wenziqu2_3,.wenziqu3_3','pink','green','grey')
        
    }else{allSection[q].style.display='none'}
    q++
    if(q<p){
        //这里判断成功，进行数组中第q组数据的获取
        var chanpinname=(data[q].name)
        var dazhejiage=(data[q].price)
        var yiqianjiage=(data[q].price2)
        var imgarr=(data[q].imgurl).split("*")
        //这时候开始调用大一统函数,将获取的数值赋给大一统函数
        xuanran(imgarr,'gouzi2','tuchuang6',0,6,6,12,12,19,'mao','xiaodian6 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_4,.wenziqu2_4,.wenziqu3_4','pink','green','grey')
        
    }else{allSection[q].style.display='none'}
    q++
    if(q<p){
        //这里判断成功，进行数组中第q组数据的获取
        var chanpinname=(data[q].name)
        var dazhejiage=(data[q].price)
        var yiqianjiage=(data[q].price2)
        var imgarr=(data[q].imgurl).split("*")
        //这时候开始调用大一统函数,将获取的数值赋给大一统函数
        xuanran(imgarr,'gouzi2','tuchuang7',0,6,6,12,12,19,'mao','xiaodian7 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_5,.wenziqu2_5,.wenziqu3_5','pink','green',)
        
    }else{allSection[q].style.display='none'}
    q++
    if(q<p){
        //这里判断成功，进行数组中第q组数据的获取
        var chanpinname=(data[q].name)
        var dazhejiage=(data[q].price)
        var yiqianjiage=(data[q].price2)
        var imgarr=(data[q].imgurl).split("*")
        //这时候开始调用大一统函数,将获取的数值赋给大一统函数
        xuanran(imgarr,'gouzi2','tuchuang8',0,6,6,12,12,19,'mao','xiaodian8 section',chanpinname,dazhejiage,yiqianjiage,'.wenziqu1_6,.wenziqu2_6,.wenziqu3_6','pink','green',)
        
    }else{allSection[q].style.display='none'}
}
//在搜索框被按下回车的时候进行搜索|触发函数
oSearch.onkeydown=function(ev){
    //判断键盘按下的案件，如果是回车，就执行搜索事件
    if(ev.keyCode===13){
        if(oSearch.value!=null){
            ajax({
                url: '../php/liebiao.php',
                
                data:{
                    num: 1,
                    limit: 14,
                    //需要添加参数,根据输入的参数来决定搜索什么东西
                    txt:oSearch.value
                },
                success(res) { 
                    var obj=JSON.parse(res)
                    //这个obj里面存放着满足要求的商品数据对象
                    
                    mohu(obj.data)
                    }
                })
        }else{
            return
        }
        
    }
}
//获取页面上的所有八个section 当section被点击的时候，就生成一个id数值，传递给大一统函数进行调用
let secondSection=document.querySelectorAll('.section')
//这时候页面上的所有section都已经被选中 开始循环
secondSection.forEach((ele,index)=>{
    ele.onclick=function(){
        //alert('本商品已被添加到购物车')
        let dangQianDianJi=index+1
        //已经获取到当前点击商品所对应的id序号，向数据库中请求当前id对应的数据
        ajax({
            url: '../php/liebiao.php',
            data:{
                num: dangQianDianJi,
                limit: 1
            },
            success(res) { 
                var obj=JSON.parse(res)
                //这个时候已经获取到了id所对应的数据,开始对应的页面渲染
               console.log(obj.data)
               let zzz=obj.data[0]
               localStorage.setItem(JSON.stringify(dangQianDianJi),JSON.stringify(zzz))
               /* 此时已经可以将对应id数值的数据以id数值作为索引存入本地存储中了 */
               //接下来就是获取本地存储中的数值，将他们存到数组中
               /* alert('已成功添加到购物车') */
               
                }
            })
    }
})
//刚才应该已经将对应的数据对象存入浏览器缓存当中了
//现在我们要做的就是将他们取出来 这里就偷个懒啦因为这个程序在购物车那边已经写好了直接粘过来用了
/* shopCarYuLan()
function shopCarYuLan(){ */
let allArr=[]
for(let i=1;i<=8;i++){
    let obj=JSON.parse(localStorage.getItem(JSON.stringify(i)))
    allArr.push(obj)
}
let allArr2=[]
allArr.forEach((ele)=>{
    if(ele!=null){
        allArr2.push(ele)
    }
})
//现在这个数组allArr2就是刚才存入浏览器的，已经将它取出来了
console.log(allArr2);
//大的要来了，现在就开始循环数组将其写入页面！
//获取navErji 向里面写入navErjiChild
let money=0
let navErji=document.querySelector('.navErji')
allArr2.forEach((ele)=>{
    money+=parseInt(ele.price)
    console.log(money);
})
let zongjia=document.querySelector('.zongjia')
let allShangpin=document.querySelector('.allShangpin')
allShangpin.innerHTML=allArr2.length
zongjia.innerHTML=money
allArr2.forEach((ele,index)=>{
    var abc=ele.imgurl.split("*")
    navErji.innerHTML+=` <div class="navErjiChild">
    <img src="${abc[0]}" alt="">
    <ul>
        <li><span>${ele.name}</span><span class="gougou">¥${ele.price}</span></li>
        <li>12GB RAM</li>
        <li>512GB ROMX1</li>
    </ul>
</div>`
})

let jieSuan=document.querySelector('.jieSuan')
let closs=document.querySelector('.closs')
jieSuan.onclick=function(){
    location.href='./gouWuChe.htm'
}
let gouwucheche=document.querySelector('.gouwucheche')
gouwucheche.onmouseover=function(){
    navErji.classList.remove('off')
}
closs.onclick=function(){
    navErji.classList.add('off')
}


